import { getLayoutProps } from "@/common/layout/getProps";
import { ProForm } from "@/components/ProForm";
import { data } from "@/pages/performanceStatisticalReports/data";
import { UploadOutlined } from "@ant-design/icons";
import { PageContainer } from "@ant-design/pro-layout";
import {
  Button, DatePicker,
  Divider,
  Form,
  Input,
  Row,
  Modal,
  Select,
  Table,
  message,
  Pagination,
  type TableColumnsType,
} from "antd";
import dayjs from "dayjs";
import Router from "next/router";
import { useRouter } from "next/router";
import { useState,useEffect } from "react";
import { http } from "@/utils/request";

const { confirm } = Modal;
const RefereeList = () => {
  const router = useRouter();
  const { query } = router;
  const { activityId } = query;
  const [form] = Form.useForm();
  const [list,setList] = useState([]);
  const [pageNum,setPageNum] = useState(1);
  const [pageSize,setPageSize] = useState(10);
  const [total,setTotal] = useState();
  const [activityOption,setActivityOption] = useState([]);

  const columns: TableColumnsType = [
    {
      align: "center",
      title: "序号",
      width: 60,
      key: "index",
      render: (_text, _record, index) => {
        return index + 1
      }
    },
    {
      align: "center",
      title: "评优活动",
      dataIndex: "activityName",
      width:180
    },
    {
      align: "center",
      title: "推荐人",
      dataIndex: "activityName",
      width:180
    },
    {
      align: "center",
      title: "岗位",
      dataIndex: "position",
      width:120
    },
    {
      align: "center",
      title: "所属部门",
      dataIndex: "deptName",
      width:120
    },
    {
      align: "center",
      title: "绩效得分",
      dataIndex: "evaluScore",
      width:120
    },
    {
      align: "center",
      title: "提交人",
      dataIndex: "num4",
      width:120
    },
    {
      align: "center",
      title: "提交时间",
      dataIndex: "num2",
      width:120
    },
    {
      align: "center",
      title: "状态",
      dataIndex: "auditStatus",
      width:120,
      fixed:'right',
      render: (_, record) => {
        return (
          <>
            {record.auditStatus === "1" && <span>待提交</span>}
            {record.auditStatus === "2" && <span>审核中</span>}
            {record.auditStatus === "3" && <span>已完成</span>}
          </>
        )
      }
    },
    {
      align: "center",
      title: "操作",
      render: (_, record) => {
        return (
          <>
            <Button type={'link'} onClick={() => {
              router.push(`/employeeExcellentEvaluation/refereeConfirm/refereeConfirmDetail?id=${record.id}&type=detail`)
            }}>详情</Button>
          </>
        )
      }
    }
  ]
  //修改页码或分页大小
  const changePagination = async (page: number, size: number)=>{
    setPageNum(page);
    if(size!==pageSize){
      setPageNum(1);
    }
    setPageSize(size);
  }
  const submit = async() =>{
    try {
      const res = await http.get({
        url:'/PmExcellentPersonReq/submitPersonReq',
        params:{activityId:activityId}
      })
      message.success('提交推荐人成功!');
      Router.back();
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  //查询接口
  const getList = async() =>{
    try {
      const res = await http.get({
        url:'/PmExcellentPersonReq/queryPmExcellentPersonReqList',
        params:{
          activityId:form.getFieldValue('activityId'),
          personName:form.getFieldValue('personName'),
          deptName:form.getFieldValue('deptName'),
          position:form.getFieldValue('position'),
          applyTime:form.getFieldValue('applyTime')?dayjs(form.getFieldValue('applyTime')).format('YYYY-MM-DD'):'',
          pageNum:pageNum,
          pageSize:pageSize,
        }
      })
      setList(res.rows);
      setTotal(res.total);
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  const getActivity = async() =>{
    try {
      const res = await http.get({
        url:'/PmExcellentActivity/queryPmExcellentActivityAll',
      })
      setActivityOption(res.rows.map(item=>({value:item.id,label:item.activityName})));
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  useEffect(()=>{
    getActivity();
    form.setFieldValue('activityId',Number(activityId));
    getList();
  },[pageNum,pageSize])
  return (
    <PageContainer>
      <ProForm form={form} layout={'inline'} onSearch={getList} onReset={getList}>
        <Form.Item
          label={'评优活动'}
          name="activityId"
        >
          <Select
            placeholder='请选择'
            options={activityOption} disabled>
          </Select>
        </Form.Item>
        <Form.Item
          label={'推荐人'}
          name="personName"
        >
          <Input placeholder={'请输入'} />
        </Form.Item>
        <Form.Item
          label={'所属部门'}
          name="deptName"
        >
          <Input placeholder={'请输入'} />
        </Form.Item>
        <Form.Item
          label={'岗位'}
          name="position"
        >
          <Input placeholder={'请输入'} />
        </Form.Item>
        <Form.Item
          label={'提交时间'}
          name="applyTime"
        >
          <DatePicker />
        </Form.Item>
      </ProForm>
      <Divider className={'mb-[20px] mt-0'} />

      <Row className={'mb-[20px]'} justify={'space-between'}>
        <Button type={'primary'} icon={<UploadOutlined />} onClick={() => {
          confirm({
            title: '提示?',
            content: '确认提交所有推荐人吗?',
            cancelText:'取消',
            okText:'确定',
            onOk() {
              submit();
            },
            onCancel() {
              console.log('Cancel');
            },
          });
        }}>提交</Button>
      </Row>

      <Table
        dataSource={list}
        columns={columns}
        rowKey={"id"}
        bordered
        pagination={false}
      ></Table>
      <Pagination
        className={'m-[20px] text-end'}
        current={pageNum}
        pageSize={pageSize}
        total={total}
        showSizeChanger
        showQuickJumper
        showTotal={(total) => `共 ${total} 条`}
        onChange={changePagination}
      />
    </PageContainer>
  )
}

export const getServerSideProps = getLayoutProps;
export default RefereeList;
